import { Form, Select, Input, Button, Table, message } from 'antd';
import React, { useEffect, useState } from 'react';
import type { ColumnsType } from 'antd/es/table';
import * as service1 from '../../../api/zzachieve1';
import * as service from '../../../api/zzachieve';
import './AchieFirst.scss'
import { useNavigate } from 'react-router-dom';

interface Props {

}

interface DataType {
    id: any,
}
function AchieFirst(props: Props) {

    // const form = Form.useFormInstance()

    const [form] = Form.useForm()

    const { Option } = Select;

    const { Search } = Input;

    let [tabledata, setTableData] = useState([])

    let navigate = useNavigate()

    const [messageApi, contextHolder] = message.useMessage();

    let goachieve = () => {
        navigate('/index/achievements/achieGo')
    }
    let editachieve = () => {
        navigate('/index/achievements/achieEdit')
    }
    let handadd = () => {
        navigate('/index/achievements/achieFirstAdd')
    }


    //表格列的配置
    // useEffect(() => {

    //     service.people_list().then((res) => {
    //         console.log(res.data);
    //         res.data.map((item: any) => {
    //             item.key = item.id
    //         })
    //         setTableData(res.data)
    //     })
    // }, [])

    // 列表
    useEffect(() => {

        service1.people_list().then((res) => {
            console.log(res.data);
            res.data.map((item: any) => {
                item.key = item.id
            })
            setTableData(res.data)
        })
    }, [])


    const columns: ColumnsType<DataType> = [
        {
            title: '考核计划名称',//表格列的标题
            dataIndex: 'name',//数据索引（属性名）
            key: 'name',
            width: '150px'
            // render: (_, record) => <a>{tabledata.indexOf(record) + 1}</a>,//动态渲染标签/组件
        },
        {

            title: '考核范围',//表格列的标题
            dataIndex: 'ranges',//数据索引（属性名）
            key: 'range',
            // render: (_, record) => <img src={record.range} />,//动态渲染标签/组件
        },
        {
            title: '考核周期类型',//表格列的标题
            dataIndex: 'type',//数据索引（属性名）
            key: 'type',
            // render: (text) => <a>{text}</a>,//动态渲染标签/组件
        },
        {
            title: '考核周期',//表格列的标题
            dataIndex: 'cycle',//数据索引（属性名）
            key: 'cycle',
            // render: (text) => <a>{text}</a>,//动态渲染标签/组件
        },
        {
            title: '考核状态',//表格列的标题
            dataIndex: 'state',//数据索引（属性名）
            key: 'state',
            // render: (_, record) => <a onClick={() => { deleteSwiper(record.key) }}>删除</a>,//动态渲染标签/组件
        },
        {
            title: '操作',//表格列的标题
            // dataIndex: '',//数据索引（属性名）
            key: 'ez',
            render: (_, record) => {
                return <>
                    <a onClick={goachieve}>发起考核</a>
                    <a onClick={editachieve}>编辑</a>
                    <a >设为模板</a>

                    <a onClick={() => { handelete(record.id) }}>删除</a>
                </>
            }
            // <a onClick={() => { delete(record.key) }}>删除</a>,//动态渲染标签/组件
        },
    ]

    // let handelete = async (id: any) => {
    //     let res = await service.people_delete({ id: id })
    //     console.log(res);
    //     if (res.status == 200) {
    //         messageApi.open({
    //             type: 'success',
    //             content: '已删除',
    //         });
    //     }
    // }

    let handelete = async (id: any) => {
        let res = await service1.people_delete({ id: id })
        console.log(res);
        if (res.status == 200) {
            messageApi.open({
                type: 'success',
                content: '已删除',
            });
        }
    }

    // let onSearch = async (value: String) => {
    //     let res = await service.people_search({ name_like: value })
    //     console.log(res.data);
    //     res.data.map((item: any) => {
    //         item.key = item.id
    //     })
    //     setTableData(res.data)
    // }
    // 具体搜索
    let onSearch = async (name: any) => {
        let res = await service1.people_search({ name })
        console.log(res.data);
        res.data.map((item: any) => {
            item.key = item.id
        })
        setTableData(res.data)
    }
    return (
        <div className='first'>
            <div className='top'>
                <div className='colo'></div>
                <div className='text'>考核计划</div>
            </div>
            <div className='middle'>
                <div className='left'>
                    <Form
                        form={form}
                    >
                        <Form.Item name="gender" label="周期类型" rules={[{ required: false }]}>
                            <Select

                                placeholder="请选择"
                                allowClear
                            >
                                <Option value="全部">全部</Option>
                                <Option value="月度">月度</Option>
                                <Option value="季度">季度</Option>
                                <Option value="半年度">半年度</Option>
                                <Option value="年度">年度</Option>
                                <Option value="其他">其他</Option>
                            </Select>
                        </Form.Item>
                    </Form>
                    <Search placeholder="请输入关键字"
                        onSearch={onSearch}
                        style={{ width: 200 }} />
                    {contextHolder}
                </div>
                <div className='right'>
                    <Button type="primary" onClick={() => { handadd() }}>+新增考核计划</Button>
                </div>
            </div>
            <div className='bottom'>
                {/* columns 表格列的配置 */}
                <Table columns={columns} dataSource={tabledata} />
            </div>
        </div>
    );
}
export default AchieFirst;